<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户管理</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/laydate.js" ></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>订购单管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">订单编号</label>
      <div class="layui-input-inline">
        <input type="text" id="orderNum" name="orderNum" autocomplete="off" class="layui-input" >
      </div>

      <label class="layui-form-label">客户姓名</label>
      <div class="layui-input-inline">
        <input type="text" id="name" name="name" autocomplete="off" class="layui-input" >
      </div>

      <label class="layui-form-label">订购时间</label>
      <div class="layui-input-inline">
        <input type="date" id="start_time" name="start_time" id="start_time" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline">
        <input type="date" id="end_time" name="end_time" id="end_time" autocomplete="off" class="layui-input" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">审核状态</label>
      <div class="layui-input-inline" >
        <select name="status" lay-verify="required"  id="status">
          <option value="">请选择</option>
          <option value="1">未审核</option>
          <option value="2">审核中</option>
          <option value="3">审核通过</option>
          <option value="4">审核未通过</option>
        </select>
      </div>
      <label class="layui-form-label">金额</label>
      <div class="layui-input-inline">
        <input type="text" id="lowMoney" name="lowMoney" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline">
        <input type="text" id="highMoney" name="highMoney" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-btn-container">
        <button type="button" class="layui-btn btn-search"><i class="layui-icon">&#xe615;</i>查询</button>
        <button type="button" class="layui-btn btn-add" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
      </div>
    </div>

    <table id="demo" lay-filter="test"></table>
  </form>
</div>

<div class="rightinfo" style="display: none" id="inner">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">部门</label>
      <div class="layui-input-inline" >
        <select name="department" lay-verify="required" disabled>
          <option value="0">请选择</option>
          <option value="市场部">市场部</option>
          <option value="采购部">采购部</option>
          <option value="财务部">财务部</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">职位</label>
      <div class="layui-input-inline" >
        <select name="position" lay-verify="required">
          <option value="0">请选择</option>
          <option value="项目经理">项目经理</option>
          <option value="项目副经理">项目副经理</option>
          <option value="项目主管">项目主管</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-inline" >
        <select name="status" lay-verify="required">
          <option value="0">请选择</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </div>
  </form>
</div>

<script>
  layui.use(['table', 'form','layer','laydate'], function () {
    var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            util = layui.util,
            $ = layui.jquery;
    form.render();

    laydate.render({ //开始时间
      elem: '#start_time',
      format: 'yyyy-MM-dd',
      done: function (value, date, endDate) {
        var startDate = new Date(value).getTime();
        var endTime = new Date($('#end_time').val()).getTime();
        if (endTime < startDate) {
          layer.msg('结束时间不能小于开始时间');
          $('#start_time').val('');
        }
      }
    });
    laydate.render({ //结束时间
      elem: '#end_time',
      format: 'yyyy-MM-dd',
      done: function (value, date, endDate) {
        var startDate = new Date($('#start_time').val()).getTime();
        var endTime = new Date(value).getTime();
        if (endTime < startDate) {
          layer.msg('结束时间不能小于开始时间');
          $('#end_time').val('');
        }
      }
    });

    $('.btn-add').on('click', function () {
      layer.open({
        type: 2,
        shift: 2,
        title: '添加信息',
        area: ['1000px', '700px'],
        closeBtn: false,
        shadeClose: false,
        content: 'market/order/orderAdd.jsp',
        btnAlign: 'c',
        btn: ['关闭'],
        success: function (layero, index) {
          var body = layer.getChildFrame('body', index);
          var date = new Date();
          var time1 ="DJ"+date.getFullYear()+(date.getMonth()+1)+date.getDate()+date.getHours()+date.getMinutes();
          var time2 = date.toLocaleString();
          //console.log(time)
          body.find("#orderNum").val(time1);
          body.find("#status").val("1");
          body.find("#orderTime").val(time2);
          body.find("#creater").val("admin");
        },
      });
      form.render();
    });

    $('.btn-search').on('click', function () {
      var orderNum = $('#orderNum').val();
      var name = $('#name').val();
      var start_time = $('#start_time').val();
      var end_time = $('#end_time').val();
      var lowMoney = $('#lowMoney').val();
      var highMoney = $('#highMoney').val();
      var status = $('#status').val();
      table.reload('demo', {
        url: '/order/getAllOrderList',
        method: 'post',
        dataType: 'json',
        where: { //设定异步数据接口的额外参数，任意设
          orderNum: orderNum,
          name: name,
          start_time: start_time,
          end_time: end_time,
          lowMoney: lowMoney,
          highMoney: highMoney,
          status: status
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      form.render();
    });

    table.render({
      elem: '#demo'
      ,height: 400
      ,url: '/order/getAllOrderList' //数据接口
      ,page: true //开启分页
      ,limits: [1, 2, 3, 4,5]
      ,limit: 3   // 每页条数
      ,cols: [[ //表头
        {field: '_id', title: '序号', width:60, type:"numbers", fixed: 'left',align: "center" }
        ,{field: 'id', title: '序号', width:60, sort: true, fixed: 'left',align: "center" }
        ,{field: 'orderNum', title: '订单编号', width:150, sort: true,align: "center"}
        ,{field: 'name', title: '客户姓名', width:90,align: "center"}
        ,{field: 'tel', title: '联系电话', width:100,align: "center"}
        ,{field: 'orderTime', title: '订购时间', width: 150,align: "center",
          templet: function (res) {
            return util.toDateString(res.orderTime, "yyyy-MM-dd HH:mm:ss")
          }
          }
        ,{field: 'totalAmount', title: '金额', width: 120,align: "center",
          templet:function(res){
            if(res.totalAmount != null){
              var money = "￥"+res.totalAmount;
              return money;
            }else{
              return '';
            }
          }
        }
        ,{field: 'creater', title: '操作人', width: 80,align: "center"}
        ,{field: 'status', title: '审核状态', width: 100,align: "center",
          templet:function(res){
            if(res.status=='1'){
              return '未审核';
            }else if (res.status=='2'){
              return '审核中';
            }else if (res.status=='3'){
              return  '审核通过';
            }else {
              return '审核未通过';
            }
          }
        }
        ,{field: 'checker', title: '审核人', width: 80,align: "center"}
        ,{field: 'opinion', title: '审核意见', width: 150,align: "center"}
        ,{field: 'checkTime', title: '审核时间', width: 150,align: "center"}
        ,{title: '操作', width: 228, toolbar: '#barDemo', align: "center"}
      ]]
      ,done: function (){
        $("[data-field='id']").css('display','none');
        $("[data-field='opinion']").css('display','none');
      }
    });

    //工具条事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      console.log(data)
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'detail'){ //查看
        layer.open({
          type: 2,
          shift: 2,
          title: '查看信息',
          area: ['1000px', '700px'],
          closeBtn: false,
          shadeClose: false,
          content: 'market/order/orderView.jsp',
          btnAlign: 'c',
          btn: ['关闭'],
          success: function (layero, index) {
            var body = layer.getChildFrame('body', index);
            body.find("#orderNum").val(data.orderNum);
            body.find("#name").val(data.name);
            body.find("#tel").val(data.tel);
            body.find("#orderTime").val(util.toDateString(data.orderTime, "yyyy-MM-dd HH:mm:ss"));
            body.find("#totalAmount").val(data.totalAmount);
            body.find("#creater").val(data.creater);
            body.find("#status").val(data.status);
            body.find("#checker").val(data.checker);
            body.find("#opinion").val(data.opinion);
            body.find("#checkTime").val(util.toDateString(data.checkTime, "yyyy-MM-dd HH:mm:ss"));
          },
        });
        form.render();
      } else if(layEvent === 'edit'){ //修改
        layer.open({
          type: 2,
          shift: 2,
          title: '修改信息',
          area: ['1000px', '700px'],
          closeBtn: false,
          shadeClose: false,
          content: 'market/order/orderUpdate.jsp',
          success: function (layero, index) {
            var body = layer.getChildFrame('body', index);
            body.find("#orderNum").val(data.orderNum);
            body.find("#name").val(data.name);
            body.find("#tel").val(data.tel);
            body.find("#orderTime").val(util.toDateString(data.orderTime, "yyyy-MM-dd HH:mm:ss"));
            body.find("#totalAmount").val(data.totalAmount);
            body.find("#creater").val(data.creater);
            body.find("#status").val(data.status);
            body.find("#checker").val(data.checker);
            body.find("#opinion").val(data.opinion);
            body.find("#checkTime").val(util.toDateString(data.checkTime, "yyyy-MM-dd HH:mm:ss"));
          },
          btnAlign: 'c',
          btn: ['关闭'],
        });
        //form.render();
      } else if(layEvent === 'delete'){//删除
          layer.open({
            type: 1,
            shift: 2,
            title: '提示信息',
            area: ['600px', '300px'],
            closeBtn: false,
            shadeClose: false,
            content: '是否确认删除此条信息？',
            btnAlign: 'c',
            btn: ['确定','关闭'],
            yes: function(index, layero){
              $.ajax({
                url: 'order/delOrder',
                type: 'post',
                data: {
                  orderNum: data.orderNum
                },
                dataType: 'json',
                success: function (resp) {
                  if (resp.success) {
                    table.reload('#demo', {
                      where: {},
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                  }
                }
              });
              $('.btn-search').click();
              //do something
              layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
          });
          form.render();
        } else if(layEvent === 'submit') { //分配
          layer.open({
            type: 1,
            shift: 2,
            title: '提示信息',
            skin:'layui-layer-molv',
            area: ['500px', '300px'],
            closeBtn: 1,
            shadeClose: false,
            shade:0.0,
            content: $("#inner"),
            btnAlign: 'c',
            btn: ['确认', '关闭'],
          });
        }
    });
  });
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
  {{# if(d.status == "1"){ }}
  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
  {{# } }}
  {{# if(d.status =="1" || d.status =="4"){ }}
  <a class="layui-btn  layui-btn-xs" lay-event="submit">提交审核</a>
  {{# } }}
  {{# if(d.status == "3"){ }}
  <a class="layui-btn layui-btn-xs" lay-event="delivery_details">出库详情</a>
  {{# } }}
</script>
</body>
</html>
